// 轮播管理子组件 编辑与添加共用弹框
import React, { useEffect, useState } from 'react';
import { Button, Modal, message, Form, Input, Switch, InputNumber } from 'antd';
import '../../../css/AddorRev.css'
import '../../../css/operation.css'
import { revSreach, addSreach } from '../../../../api/opreationApi'


// 表格列表
interface DataType {
  key: React.Key;
  searchId: number;
  searchName: string;
  searchLocation: number;
  searchState: number
}


// 参数接口
interface PropsType {
  modalClose(): void,
  isModalOpen: boolean,
  head: string | null,
  nowRev: DataType | null,
  getData(): void
  upTotal: any
}


export default function AddorRev(props: PropsType) {
  const [form] = Form.useForm();
  const [disabled, setDisabled] = useState<boolean>()
  // 初始化
  useEffect(() => {
    //去修改form表单里面的默认值
    if (props.head === '添加') {
      setDisabled(props.upTotal >= 6 ? true : false)
      form.setFieldsValue({
        searchName: null,
        searchLocation: null,
        searchState: null
      })
    } else {
      setDisabled(props.nowRev?.searchState === 0 && props.upTotal >= 6 ? true : false)
      form.setFieldsValue({
        searchName: props.nowRev?.searchName,
        searchLocation: props.nowRev?.searchLocation,
        searchState: props.nowRev?.searchState
      })
    }

  }, [props])

  // 对话框部分
  const handleOk = () => {
    props.modalClose()
  };

  const handleCancel = () => {
    props.modalClose()
  };
  // 表单部分
  const onFinish = (values: any) => {
    let data = {
      searchLocation: values.searchLocation,
      searchName: values.searchName,
      searchState: values.searchState === true ? 1 : 0
    }
    if (props.head === '添加') {
      addSreach(data).then(res => {
        props.getData()
      })
    } else {
      revSreach({ ...data, searchId: props.nowRev?.searchId }).then(res => {
        props.getData()
      })
    }
    props.modalClose()
    message.success('提交成功！')
  };
  console.log(props.nowRev);


  return (
    <>
      <Modal title={props.head} open={props.isModalOpen} onOk={handleOk} onCancel={handleCancel} footer={null}>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
          id='maxW'
          form={form}
        >
          {/*关键词 */}
          <Form.Item
            label="关键词名称"
            name="searchName"
            rules={[{ required: true, message: '请输入关键词名称！' }]}
            initialValue={props.nowRev?.searchName}
          >
            <Input placeholder="请输入关键词名称！" />
          </Form.Item>
          {/* 位置 */}
          <Form.Item
            label="位置"
            name="searchLocation"
            rules={[{ required: true, message: '请输入位置！' }]}
            initialValue={props.nowRev?.searchLocation}
          >
            <InputNumber placeholder="请输入位置！" />
          </Form.Item>
          {/* 状态 */}
          <Form.Item name='searchState' label="状态" valuePropName='checked' initialValue={props.nowRev?.searchState}>
            <Switch disabled={disabled} />
          </Form.Item>
          {/* 操作按钮 */}
          <Form.Item wrapperCol={{ offset: 8, span: 16 }} className='opreate'>
            <Button type="primary" htmlType="submit" className='submit'>提交</Button>
            <Button type="primary" onClick={handleCancel} className='cancel'>取消</Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};
